<template>
  <el-row :gutter="10" class="quick-entry">
    <el-col :xs="12" :sm="12" :lg="4" class="entry-item-col">
      <div class="entry-item">
        <i class="el-icon-s-order icon"></i>
        <div class="name">销售开单</div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="4" class="entry-item-col">
      <div class="entry-item">
        <i class="el-icon-s-claim icon buy-icon"></i>
        <div class="name">采购开单</div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="4" class="entry-item-col">
      <div class="entry-item">
        <i class="el-icon-s-tools icon work-icon"></i>
        <div class="name">生产报工</div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="4" class="entry-item-col">
      <div class="entry-item">
        <i class="el-icon-s-home icon store-icon"></i>
        <div class="name">入库管理</div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="4" class="entry-item-col">
      <div class="entry-item">
        <i class="el-icon-s-opportunity icon"></i>
        <div class="name">销售开单</div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="4" class="entry-item-col">
      <div class="entry-item">
        <i class="el-icon-s-data icon other-icon"></i>
        <div class="name">销售开单</div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
.quick-entry {
  margin-top: 2px;

  .entry-item-col {
    margin-bottom: 10px;
  }

  .entry-item {
    cursor: pointer;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    font-size: 0.8rem;
    transition: all 0.5s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 140px;
    .icon {
      font-size: 1.6rem;
      color: rgb(105, 161, 249);
    }
    .buy-icon {
      color: rgb(89, 205, 170);
    }
    .work-icon {
      color: rgb(250, 200, 88);
    }
    .store-icon {
      color: rgb(238, 102, 102);
    }
    .other-icon {
      color: rgb(144, 147, 153);
    }
    .name {
      margin-top: 20px;
      // font-size: 1rem;
    }
  }
  .entry-item:hover {
    transform: scale(1.04);
  }
}
</style>
